<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }

        .box1 {
            background: red;
            display: block;
        }

        .box2 {
            background: blue;
            display: none;
        }

        .box3 {
            background: yellow;
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
        <button class="btn">按钮三</button>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
    <div class="container2">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
        <button class="btn">按钮三</button>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <button class="next">下一页</button>
    </div>

    <div class="container3">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
        <button class="btn">按钮三</button>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
    <script>
        class Tab {
            constructor(btns, divs) {
                var nowK = 0;
                this.nowK = nowK;
                this.divs = divs;
                // console.log(this.switchTab);
                // var that = this;
                btns.forEach((btn, k) => {
                    btn.onclick = () => {
                        console.log(k);
                        nowK = k;
                        console.log(this);
                        this.switchTab(k);
                    }
                })
            }
            switchTab(k){
                this.divs.forEach((div, key) => {
                if (key == k) {
                    div.style.display = "block";
                } else {
                    div.style.display = "none";
                }
            })
            }
        }




        // function Tab(btns, divs) {
        //     var nowK = 0;
        //     this.nowK = nowK;
        //     this.divs = divs;
        //     // console.log(this.switchTab);
        //     // var that = this;
        //     btns.forEach((btn, k) => {
        //         btn.onclick = () => {
        //             console.log(k);
        //             nowK = k;
        //             console.log(this);
        //             this.switchTab(k);
        //         }
        //     })
        // }
        // Tab.prototype.switchTab = function (k) {
        //     this.divs.forEach((div, key) => {
        //         if (key == k) {
        //             div.style.display = "block";
        //         } else {
        //             div.style.display = "none";
        //         }
        //     })
        // }

        // 特殊功能
        // 第一个选项卡
        var btns = document.querySelectorAll(".container .btn");
        var divs = document.querySelectorAll(".container div");
        var tab1 = new Tab(btns, divs);
        console.log(tab1);
        // 第二个选项卡
        var btns2 = document.querySelectorAll(".container2 .btn");
        var divs2 = document.querySelectorAll(".container2 div");
        var tab2 = new Tab(btns2, divs2);

        // //第二个选项卡 特性功能 ；下一个功能
        var nextBtn = document.querySelector(".next");
        var num = 0;
        nextBtn.onclick = function () {
            console.log(num);
            tab2.switchTab(num);
            num++;
            if (num == 3) {
                num = 0;
            }
        }


        // 第三个选项卡
        var btns3 = document.querySelectorAll(".container3 .btn");
        var divs3 = document.querySelectorAll(".container3 div");
        var tab3 = new Tab(btns3, divs3);

        var num2 = 0;
        setInterval(() => {
            tab3.switchTab(num2);
            num2++;
            if (num2 == 3) {
                num2 = 0;
            }
        }, 1000)





    </script>
</body>

</html>